{% extends "base.html" %}

{% block title %}关于项目 - XbyJob{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="fas fa-info-circle me-2"></i>关于项目</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ url_for('dashboard.settings') }}" class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>返回设置
        </a>
    </div>
</div>

<div class="row">
    <!-- 项目概述 -->
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header">
                <h5><i class="fas fa-project-diagram me-2"></i>项目概述</h5>
            </div>
            <div class="card-body">
                <div class="row align-items-center mb-4">
                    <div class="col-md-2 text-center">
                        <i class="fas fa-cogs fa-4x text-primary"></i>
                    </div>
                    <div class="col-md-10">
                        <h4 class="text-primary">XbyJob 任务调度系统</h4>
                        <p class="text-muted mb-2">一个基于 Python Flask 的分布式任务调度平台，支持定时任务、脚本管理、执行监控等功能。</p>
                        <p class="mb-0">
                            <span class="badge bg-primary me-2">v1.0.0</span>
                            <span class="badge bg-success me-2">生产就绪</span>
                            <span class="badge bg-info">开源项目</span>
                        </p>
                    </div>
                </div>
                
                <h6 class="text-primary mb-3"><i class="fas fa-bullseye me-2"></i>核心功能</h6>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>定时任务调度</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>脚本管理与执行</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>执行日志监控</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>用户权限管理</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>分布式执行</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>依赖包管理</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>系统监控</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Web 管理界面</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 技术栈 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5><i class="fas fa-layer-group me-2"></i>技术栈</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary mb-3">后端技术</h6>
                        <div class="mb-3">
                            <span class="badge bg-primary me-2 mb-2">Python 3.8+</span>
                            <span class="badge bg-primary me-2 mb-2">Flask</span>
                            <span class="badge bg-primary me-2 mb-2">SQLAlchemy</span>
                            <span class="badge bg-primary me-2 mb-2">Celery</span>
                            <span class="badge bg-primary me-2 mb-2">Redis</span>
                            <span class="badge bg-primary me-2 mb-2">MySQL</span>
                            <span class="badge bg-primary me-2 mb-2">APScheduler</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-success mb-3">前端技术</h6>
                        <div class="mb-3">
                            <span class="badge bg-success me-2 mb-2">Bootstrap 5</span>
                            <span class="badge bg-success me-2 mb-2">jQuery</span>
                            <span class="badge bg-success me-2 mb-2">Font Awesome</span>
                            <span class="badge bg-success me-2 mb-2">Chart.js</span>
                            <span class="badge bg-success me-2 mb-2">Jinja2</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-info mb-3">部署运维</h6>
                        <div class="mb-3">
                            <span class="badge bg-info me-2 mb-2">Docker</span>
                            <span class="badge bg-info me-2 mb-2">Docker Compose</span>
                            <span class="badge bg-info me-2 mb-2">Nginx</span>
                            <span class="badge bg-info me-2 mb-2">Gunicorn</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-warning mb-3">开发工具</h6>
                        <div class="mb-3">
                            <span class="badge bg-warning text-dark me-2 mb-2">Git</span>
                            <span class="badge bg-warning text-dark me-2 mb-2">PyCharm</span>
                            <span class="badge bg-warning text-dark me-2 mb-2">Postman</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统架构 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5><i class="fas fa-sitemap me-2"></i>系统架构</h5>
            </div>
            <div class="card-body">
                <div class="text-center mb-4">
                    <svg width="100%" height="300" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
                        <!-- 用户层 -->
                        <rect x="50" y="20" width="120" height="40" fill="#007bff" rx="5"/>
                        <text x="110" y="45" text-anchor="middle" fill="white" font-size="14">Web 界面</text>
                        
                        <rect x="200" y="20" width="120" height="40" fill="#007bff" rx="5"/>
                        <text x="260" y="45" text-anchor="middle" fill="white" font-size="14">API 接口</text>
                        
                        <!-- 应用层 -->
                        <rect x="50" y="100" width="120" height="40" fill="#28a745" rx="5"/>
                        <text x="110" y="125" text-anchor="middle" fill="white" font-size="14">Flask 应用</text>
                        
                        <rect x="200" y="100" width="120" height="40" fill="#28a745" rx="5"/>
                        <text x="260" y="125" text-anchor="middle" fill="white" font-size="14">任务调度器</text>
                        
                        <rect x="350" y="100" width="120" height="40" fill="#28a745" rx="5"/>
                        <text x="410" y="125" text-anchor="middle" fill="white" font-size="14">Celery 工作者</text>
                        
                        <!-- 数据层 -->
                        <rect x="50" y="180" width="120" height="40" fill="#dc3545" rx="5"/>
                        <text x="110" y="205" text-anchor="middle" fill="white" font-size="14">MySQL 数据库</text>
                        
                        <rect x="200" y="180" width="120" height="40" fill="#dc3545" rx="5"/>
                        <text x="260" y="205" text-anchor="middle" fill="white" font-size="14">Redis 缓存</text>
                        
                        <rect x="350" y="180" width="120" height="40" fill="#dc3545" rx="5"/>
                        <text x="410" y="205" text-anchor="middle" fill="white" font-size="14">文件存储</text>
                        
                        <!-- 连接线 -->
                        <line x1="110" y1="60" x2="110" y2="100" stroke="#666" stroke-width="2"/>
                        <line x1="260" y1="60" x2="260" y2="100" stroke="#666" stroke-width="2"/>
                        <line x1="110" y1="140" x2="110" y2="180" stroke="#666" stroke-width="2"/>
                        <line x1="260" y1="140" x2="260" y2="180" stroke="#666" stroke-width="2"/>
                        <line x1="410" y1="140" x2="410" y2="180" stroke="#666" stroke-width="2"/>
                        <line x1="170" y1="120" x2="200" y2="120" stroke="#666" stroke-width="2"/>
                        <line x1="320" y1="120" x2="350" y2="120" stroke="#666" stroke-width="2"/>
                    </svg>
                </div>
                
                <div class="row">
                    <div class="col-md-4">
                        <h6 class="text-primary">表示层</h6>
                        <p class="small text-muted">基于 Bootstrap 的响应式 Web 界面，提供直观的任务管理和监控功能。</p>
                    </div>
                    <div class="col-md-4">
                        <h6 class="text-success">业务层</h6>
                        <p class="small text-muted">Flask 应用处理业务逻辑，APScheduler 负责任务调度，Celery 执行异步任务。</p>
                    </div>
                    <div class="col-md-4">
                        <h6 class="text-danger">数据层</h6>
                        <p class="small text-muted">MySQL 存储业务数据，Redis 提供缓存和消息队列，文件系统存储脚本和日志。</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 工作原理 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5><i class="fas fa-cog me-2"></i>工作原理</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary mb-3">任务调度流程</h6>
                        <ol class="list-group list-group-numbered">
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto">
                                    <div class="fw-bold">任务创建</div>
                                    用户通过 Web 界面创建定时任务
                                </div>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto">
                                    <div class="fw-bold">调度注册</div>
                                    APScheduler 注册任务到调度器
                                </div>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto">
                                    <div class="fw-bold">触发执行</div>
                                    到达执行时间，发送任务到 Celery 队列
                                </div>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                <div class="ms-2 me-auto">
                                    <div class="fw-bold">异步执行</div>
                                    Celery 工作者执行脚本并记录日志
                                </div>
                            </li>
                        </ol>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-success mb-3">核心特性</h6>
                        <div class="card">
                            <div class="card-body">
                                <div class="mb-3">
                                    <i class="fas fa-clock text-primary me-2"></i>
                                    <strong>灵活调度</strong>
                                    <p class="small text-muted mb-2">支持 Cron 表达式、间隔调度等多种调度方式</p>
                                </div>
                                <div class="mb-3">
                                    <i class="fas fa-shield-alt text-success me-2"></i>
                                    <strong>安全可靠</strong>
                                    <p class="small text-muted mb-2">用户权限控制、脚本沙箱执行、错误恢复机制</p>
                                </div>
                                <div class="mb-3">
                                    <i class="fas fa-chart-line text-info me-2"></i>
                                    <strong>监控告警</strong>
                                    <p class="small text-muted mb-2">实时监控任务状态、执行日志、系统资源</p>
                                </div>
                                <div class="mb-0">
                                    <i class="fas fa-expand-arrows-alt text-warning me-2"></i>
                                    <strong>可扩展性</strong>
                                    <p class="small text-muted mb-0">支持分布式部署、水平扩展、插件机制</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 侧边栏信息 -->
    <div class="col-lg-4">
        <!-- 项目信息 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5><i class="fas fa-code-branch me-2"></i>项目信息</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>项目名称：</strong>
                    <span class="text-muted">XbyJob</span>
                </div>
                <div class="mb-3">
                    <strong>版本：</strong>
                    <span class="badge bg-primary">v1.0.0</span>
                </div>
                <div class="mb-3">
                    <strong>开发语言：</strong>
                    <span class="text-muted">Python</span>
                </div>
                <div class="mb-3">
                    <strong>许可证：</strong>
                    <span class="text-muted">MIT License</span>
                </div>
                <div class="mb-3">
                    <strong>作者：</strong>
                    <span class="text-primary">玄月十七</span>
                </div>
                <div class="mb-3">
                    <strong>创建时间：</strong>
                    <span class="text-muted">2025年</span>
                </div>
            </div>
        </div>

        <!-- 源码地址 -->
        <div class="card mb-4">
            <div class="card-header">
                <h5><i class="fab fa-git-alt me-2"></i>源码地址</h5>
            </div>
            <div class="card-body text-center">
                <div class="mb-3">
                    <i class="fab fa-git-alt fa-3x text-danger"></i>
                </div>
                <h6 class="text-muted mb-3">开源项目</h6>
                <a href="https://gitee.com/xbyzzz1/xbyjob" target="_blank" class="btn btn-danger btn-sm mb-2 w-100">
                    <i class="fab fa-git-alt me-1"></i>访问 Gitee 仓库
                </a>
                <p class="small text-muted mb-0">
                    欢迎 Star、Fork 和贡献代码
                </p>
            </div>
        </div>

        <!-- 联系方式 -->
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-envelope me-2"></i>联系方式</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <i class="fas fa-user text-primary me-2"></i>
                    <strong>作者：</strong>玄月十七
                </div>
                <div class="mb-3">
                    <i class="fab fa-git-alt text-danger me-2"></i>
                    <strong>Gitee：</strong>
                    <a href="https://gitee.com/xbyzzz1" target="_blank" class="text-decoration-none">@xbyzzz1</a>
                </div>
                <div class="text-center mt-3">
                    <small class="text-muted">
                        如有问题或建议，欢迎提交 Issue
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<style>
.list-group-numbered .list-group-item {
    border: 1px solid rgba(0,0,0,.125);
    margin-bottom: 0.5rem;
    border-radius: 0.375rem;
}
</style>
{% endblock %}